<template>
    <el-aside class="list-aside">
        <el-input
            v-model="search"
            class="w-50 m-2 fixed-search"
            placeholder="搜索题目"
            clearable
            style="width:100%; height: 55px; padding: 15px 24px 5px 24px;"
        />
        <div class="question-list">
            <router-link 
                :to="`/bank/${item.questionCategoryId}/question/${item.id}`" 
                v-for="item in questionList" 
                :key="item.id" 
                class="list-item" 
                :class="{'router-active': item.id === questionId}"
            >
                <span class="item-title">
                    {{ item.title }}
                </span>
            </router-link>
        </div>
    </el-aside>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { QuestionItem } from '../data';
    const search = ref('');
    
    const props = defineProps<{
        questionList: QuestionItem[];
        questionId: string | string[];
    }>();
</script>
<style lang="scss" scoped>
    // 侧边栏题目列表
    .list-aside {
        position: fixed;
        height: calc(100vh - 50px);
        background-color: #fff;
        overflow: hidden;
    }
    .fixed-search {
        position: absolute;
        top: 0;
        background-color: white;
        z-index: 1;
    }
    .question-list{
        background-color: #fff;
        height: calc(100vh - 105px);
        overflow-y: auto;
        // 隐藏滚动条（Chrome、Safari 和 Opera）
        &::-webkit-scrollbar {
            display: none;
        }
        // 隐藏滚动条（IE 和 Edge）
        -ms-overflow-style: none;
        // 隐藏滚动条（Firefox）
        scrollbar-width: none;
        margin-top:55px;
        .list-item{
            list-style: none; 
            padding: 8px 16px;
            cursor: pointer;
            .item-title{
                display:block;
                height: 40px;
                line-height: 40px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
        .router-active{
            position: relative;
            background-color: #e6f7ff;
            &::before{
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: 3px;
                height: 100%;
                background-color: #409eff;
            }
        }
    } 
</style>